<template>
  <div
    id="cesiumContainer"
    ref="cesiumContainer"
  ></div>
</template>

<script setup>
import * as Cesium from 'cesium';
import './Widgets/widgets.css';
import { onMounted } from 'vue';

// 设置cesium token
Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MmE4NGIxYi0xODY1LTQ5ZDEtODRkZi1jMDE4NDA0YTM3MWQiLCJpZCI6MjI2NDA2LCJpYXQiOjE3MjAwODg4NzZ9.EBKimXGOflvb9c_IBerc9T3knO7XZvUt-RffbhKELVE';
// 设置cesium静态资源路径
window.CESIUM_BASE_URL = '/';
// 设置相机默认视角为中国
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  89.5,
  20.4,
  110.4,
  61.2
);

onMounted(() => {
  var viewer = new Cesium.Viewer('cesiumContainer', {});

  // 隐藏cesium logo
  viewer.cesiumWidget.creditContainer.style.display = 'none';

  // 飞入广州塔
  var position = Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 2000);
  viewer.camera.flyTo({
    destination: position,
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(-90),
      roll: 0,
    },
  });

  // 添加3D建筑
  const osmBuildings = viewer.scene.primitives.add(
    new Cesium.createOsmBuildings()
  );

  // 创建一个点point
  var point = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 650), // 点的定位
    point: {
      // 点配置
      pixelSize: 10,
      color: Cesium.Color.RED,
      outlineColor: Cesium.Color.WHITE,
      outlineWidth: 3,
    },
  });

  //文字标签laber
  var laber = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 650),
    label: {
      text: '广州塔',
      font: '24px sans-serif',
      fillColor: Cesium.Color.WHITE,
      outlineColor: Cesium.Color.BLACK,
      outlineWidth: 4,
      style: Cesium.LabelStyle.FILL_AND_OUTLINE, // FILL_AND_OUTLINE填充文字和勾勒标签
      pixelOffset: new Cesium.Cartesian2(0, -24), // 文字偏移量
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 文字显示位置
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    },
    billboard: {
      //广告牌
      image: './gzt.svg',
      width: 50,
      height: 50,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      horizontalOrigin: Cesium.HorizontalOrigin.RIGHT,
    },
  });
});
</script>

<style></style>
